.effect {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .top-area {
        display: flex;
        padding-top: 1.2rem;
        justify-content: center;
        .big-circle {
            border: 1px solid #ffe1d6;
            width: 4.8rem;
            height: 4.8rem;
            display: flex;
            position: relative;
            overflow: hidden;
            justify-content: center;
            align-items: center;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            .left-choose{
                width:4rem;
                height:4rem;
                right:3.2rem;
                position: absolute;
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                transform: rotate(45deg);
                top: .4rem;
            }
            .right-choose{
                width:4rem;
                height:4rem;
                left:3.2rem;
                position: absolute;
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                transform: rotate(45deg);
                top: .4rem;
            }
            .inside-circle {
                width: 2.533rem;
                height: 2.533rem;
                font-size: .32rem;
                display: flex;
                color: #ff6832;
                z-index: 4;
                border: 1px solid #ffe1d6;
                justify-content: center;
                align-items: center;
                background-color: white;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                border-radius: 50%;
            }
            .right-choose:active,.left-choose:active{
                background-color:#ffe1d6;
            }
        }
    }
    .center-area {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 1rem;
        width:100%;
        .fun-button {
            width: 33.33%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            .button {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 1.334rem;
                height: 1.334rem;
                border: 1px solid #ffe1d6;
                -webkit-border-radius: 60px;
                -moz-border-radius: 60px;
                border-radius: 60px;
                transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
            }
            .button:active {
                background-color: #ffe1d6;
            }
            .label {
                height: 1rem;
                margin: 0;
                color: #ff6832;
                display: flex;
                align-items: center;
                font-size: .32rem;
            }
        }
    }
    .bottom-area {
        width:100%;
        display: flex;
        margin-top:.4rem;
        justify-content: center;
        align-items: center;
        .fun-button {
            width: 33.33%;
            display: flex;
            align-items: center;
            flex-direction: column;
            .haf-top-button {
                border: 1px solid #ffe1d6;
                border-bottom: none;
                -webkit-border-radius: 23px 23px 0 0;
                -moz-border-radius: 23px 23px 0 0;
                border-radius: 23px 23px 0 0;
                width: 1.067rem;
                height: 1.334rem;
                display: flex;
                color: #ff6832;
                align-items: center;
                justify-content: center;
                min-width: 30px !important;
                transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
            }
            .haf-bottom-button {
                border: 1px solid #ffe1d6;
                width: 1.067rem;
                height: 1.334rem;
                display: flex;
                color: #ff6832;
                align-items: center;
                justify-content: center;
                -webkit-border-radius: 0 0 23px 23px;
                -moz-border-radius: 0 0 23px 23px;
                border-radius: 0 0 23px 23px;
                min-width: 30px !important;
            }
            .haf-top-button:active, .haf-bottom-button:active {
                background-color: #fbeae5;
            }
            .label {
                height: 1rem;
                margin: 0;
                color: #ff6832;
                display: flex;
                align-items: center;
                font-size: .32rem;
            }
        }
    }
}
